<template>
  <pro-page>
    <a-row :gutter="[ 16, 16 ]">
      <a-col :xs="24" :lg="12" :xl="6">
        <pro-card :body-style="proCardBodyStyle" loading />
      </a-col>
      <a-col :xs="24" :lg="12" :xl="6">
        <pro-card :body-style="proCardBodyStyle" loading />
      </a-col>
      <a-col :xs="24" :lg="12" :xl="6">
        <pro-card :body-style="proCardBodyStyle" loading />
      </a-col>
      <a-col :xs="24" :lg="12" :xl="6">
        <pro-card :body-style="proCardBodyStyle" loading />
      </a-col>

      <a-col :span="24">
        <pro-card :body-style="{ height: '400px' }" loading />
      </a-col>
    </a-row>
  </pro-page>
</template>

<script>
export default {
  name: 'Welcome',
  computed: {
    proCardBodyStyle: () => ({ padding: '20px 24px 8px' })
  }
}
</script>
